<script>
import { collectorsList } from '@/api/detail';
// 加载更多
import loadMore from '@/components/Library/LoadingMore';

export default {
  name: 'collectors',

  components: {
    loadMore
  },

  data() {
    return {
      // 收藏者列表
      collectors: [],
      // 接口参数
      params: {
        id: this.$route.query.id,
        limit: 20, // 一次取出的条数
        offset: 0, // 用于分页
        timestamp: new Date().getTime()
      },
      scrollNum: 0,
      more: true
    };
  },

  methods: {
    async getCollectorsList() {
      const res = await collectorsList(this.params);
      this.collectors.push(...res.data.subscribers);
      // 给子组件more进行赋值,如果为false,关闭监听
      this.more = res.data.more;
      // this.$refs.loadMore.more = res.data.more;
    },
    // 下滑加载更多
    scrollMore() {
      this.params.offset = 
        this.scrollNum++ * this.params.limit;
      this.getCollectorsList();
    }
  },
  
  render(h) {
    let collItem = this.collectors.map(item => {
      // 判断显示♂还是♀
      let genderIcon = null;
      if (item.gender) {
        genderIcon = h('a-icon', {
          attrs: {
            type: item.gender === 2 ? 'woman' : 'man'
          },
          style: {
            color: item.gender === 2 ? 'rgb(234, 90, 149)' : 'rgb(61, 161, 209)',
            position: 'absolute',
            top: '3px',
            right: 0
          }
        });
      } else {
        genderIcon = null
      }
      return h('li', {
        staticClass: 'collectors-item'
      }, [
        // 用户头像
        h('div', {
          staticClass: 'collectors-left mright-10'
        }, [ h('img', {
          staticClass: 'img-percent',
          attrs: {
            userId: item.userId
          },
          directives: [
            {
              name: "lazy",
              rawName: "v-lazy",
              value: `${item.avatarUrl}?param=300y300`,
              expression: "item.avatarUrl",
            },
          ],
        }) ]),
        // 用户名称及简介
        h('div', {
          staticClass: 'collectors-right'
        }, [
          // 用户名
          h('div', {
            staticClass: 'mright-10 font-weight text-hidden',
            attrs: {
              title: item.nickname
            },
            domProps: {
              innerHTML: item.nickname
            }
          }),
          // 性别符号
          genderIcon,
          // 个人简介
          h('div', {
            staticClass: 'text-hidden',
            // style: {
            //   width: '120px'
            // },
            attrs: {
              title: item.signature
            },
            domProps: {
              innerHTML: item.signature
            }
          })
        ])
      ]);
    });

    return h('div', {
      attrs: {
        id: 'collectors'
      }
    }, [
      h('ul', {
        staticClass: 'collectors-list',
        on: {
          click: event => {
            const attrs = Object.values(event.target.attributes);
            const userId = attrs.findIndex(item => item.name === 'userid');
            // 有userId这个对象才进行跳转
            if (userId > -1) {
              this.$router.push({
                name: 'userdetail',
                query: {
                  id: attrs[userId].value
                }
              })
            }
          }
        }
      }, [collItem]),
      // 加载更多
      h('loadMore', {
        ref: 'loadMore',
        props: {
          more: this.more
        },
        on: {
          scrollMore: this.scrollMore
        }
      })
    ]);
  }
};
</script>

<style lang="less" scoped>
#collectors {
  .collectors-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .collectors-item {
      width: 30%;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .collectors-left {
        width: 100px;
        height: 100px;
        border: 1px solid #e6e6e6;
        border-radius: 50%;
        overflow: hidden;
      }
      .collectors-right {
        position: relative;
        width: 55%;
      }
    }
  }
}
</style>